<template>
  <s-layout
    title="店铺列表"
    navbar="custom"
    :showLeftButton="true"
    navbarMode="normal"
    :bgStyle="template.style?.background"
    :navbarStyle="template.style?.navbar"
    onShareAppMessage
    :showFloatButton="true"
  >
    <view>
      <!-- header start -->
      <view>
        <swiper
          mode="rect"
          style="height: 650rpx"
          border-radius="0"
          :autoplay="true"
          :interval="3000"
          :duration="500"
          :circular="true"
        >
          <swiper-item
            v-for="(it, idx) in bannerList"
            style="height: 600rpx"
            :key="idx"
            @tap="clickBanner(it)"
          >
            <image style="width: 100vw; height: 600rpx" :src="it" class="img" />
          </swiper-item>
        </swiper>
      </view>

      <view
        class="body flex"
        style="justify-content: space-around; text-align: center"
      >
        <view @click="orderFood(0)">
          <image
            src="https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/03/08/1b0ff7942fa0400298128f449e965607.jpg"
            style="height: 200rpx; width: 200rpx"
          ></image>
          <view class="body__text">到店消费</view>
        </view>
        <view @click="orderFood(1)">
          <image
            src="https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/03/08/82a656d6b2d54f86b95f47f11e341e38.jpg"
            style="height: 200rpx; width: 200rpx"
          ></image>
          <view class="body__text">配送到家</view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script>
import sheep from "@/sheep";
export default {
  data() {
    return {
      // bannerlist
      bannerList: [
        "https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/03/08/be84d1f1274b464c94da327310474d47.jpg",
        "https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/03/08/93d1d6c99bde4529b7e64d04a52ff6ac.jpg",
      ],
    };
  },
  computed: {
    template() {
      return sheep.$store("app").template.user;
    },
  },
  methods: {
    // spotmeal
    orderFood(param) {
      if (param === 0) {
        sheep.$router.go("/pages/cake/storeList");
      } else {
        // sheep.$router.go("/pages/goods/list?categoryId=459");
        sheep.$router.go("/pages/cake/cakeshop");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  position: relative;
  z-index: 99999;
  margin: -40rpx 30rpx 0 30rpx;
  padding: 0 15rpx;
  background-color: white;
  border-radius: 14rpx;
  padding-bottom: 20rpx;
  &__text {
    font-weight: bold;
    font-size: 30rpx;
    margin-top: 15rpx;
  }
}

// 分类网格样式
.category-grid {
  padding: 30rpx;
  margin-top: 20rpx;
}

.category-row {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.category-item {
  position: relative;
  flex: 1;
  height: 280rpx;
  border-radius: 20rpx;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.category-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
  padding: 30rpx 20rpx 20rpx;
}

.category-text {
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.category-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18rpx;
}

.category-column {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  flex: 1;
}

.category-item {
  position: relative;
  border-radius: 20rpx;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

  &.large {
    width: 320rpx;
    height: 320rpx;
  }

  &.small {
    height: 150rpx;
  }

  &.medium {
    flex: 1;
    height: 200rpx;
  }
}

.category-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-image-small {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-image-medium {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-text {
  position: absolute;
  bottom: 60rpx;
  left: 30rpx;
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
  z-index: 2;
}

.category-text-small {
  position: absolute;
  bottom: 40rpx;
  left: 20rpx;
  color: #333;
  font-size: 24rpx;
  font-weight: bold;
  z-index: 2;
}

.category-text-medium {
  position: absolute;
  bottom: 50rpx;
  left: 25rpx;
  color: #333;
  font-size: 28rpx;
  font-weight: bold;
  z-index: 2;
}

.category-subtitle {
  position: absolute;
  bottom: 30rpx;
  left: 30rpx;
  color: #666;
  font-size: 20rpx;
  z-index: 2;
}

.category-subtitle-small {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  color: #666;
  font-size: 16rpx;
  z-index: 2;
}

.category-subtitle-medium {
  position: absolute;
  bottom: 25rpx;
  left: 25rpx;
  color: #666;
  font-size: 18rpx;
  z-index: 2;
}

.integral {
  display: flex;
  align-items: flex-end;
  padding: 20rpx;

  &__nav {
    // color: $u-main-color;
    font-weight: bold;
    margin-bottom: 20rpx;
    font-size: 30rpx;

    text {
      font-size: 38rpx;
    }
  }

  &__desc {
    font-size: 24rpx;
    // color: $u-type-info;
    margin-bottom: 10rpx;
  }
}

.grid-text {
  font-size: 38rpx;
  font-weight: bold;
}

.grid-desc {
  font-size: 24rpx;
  // color: $u-type-info;
  margin-bottom: 30rpx;
}
</style>
